<!-- 1 定义组件模版 -->
<template>
    <div>
        css 详情


        <div>id:{{ query.id }}</div>

        <div>title:{{ query.title }}</div>

        <div>content:{{ query.content }}</div>



    </div>

</template>

<!-- 2 定义组件逻辑 -->
<script setup lang="ts" name="detail">

import { ref, toRefs } from "vue";

//引入一个函数
import { useRoute } from 'vue-router'

// const id = ref(1);
// const title = ref('xxxx12000');
// const content = ref('今日发布 射程全球覆盖.. ');

const route = useRoute();

//获取的对象只执行一次，失去响应式
// const query = route.query;



const { query } = toRefs(route);
console.log("route", route);
console.log("query", query);






</script>

<!-- 3 定义样式 -->
<style scoped>
div {
    margin: 5px;
}
</style>